<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="renderer" content="webkit" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
  <title>千峰教育大前端Vue教学</title>
  <!-- 引入vue -->
  <script src="js/vue3.js"></script>
  <style>
    .head {
      width: 40px;
      height: 40px;
    }

    .radius {
      border-radius: 40px;
    }

    .border {
      border: 3px solid blue;
    }
  </style>
</head>

<body style="margin:100px;font-size:22px;">
  原生图片
  <!-- <img src="./head.png" /> -->
  <!-- 定义一个容器 -->
  <div id="app">
    <!-- 声明模板内容 -->
    静态绑定
    <img src="./head.png" />
    动态绑定
    <div>
      class为字符串的形式
      <img :src="head" :class="class1" />
    </div>
    <div>
      class为数组的形式
      <img :src="head" :class="class2" />
    </div>
    <div>
      class为对象的形式
      <img :src="head" :class="class3" />
    </div>
    <div>
      class为混合的形式
      <img :src="head" :class="class4" :style="style" />
    </div>
  </div>
  <script>
    // 创建应用
    const app = Vue.createApp({
      // 初始化数据函数
      data() { // 返回一个对象，对象中写初始化数据
        window.self = this; // 将创建的vue实例挂载到window
        return {
          head: './head.png', // 初始化一个的数据
          class1: 'head radius border', // 字符串的形式
          class2: ['head', 'radius'], // 数组的形式
          class3: { head: 0, radius: 0, border: 0 }, // 对象的形式 (常用)
          class4: ['head', { radius: 0 }], // 混合的形式
          style: { border: '10px solid red' }, // 顶一个style
        };
      },
    });
    // 挂载应用
    app.mount('#app');
  </script>
</body>

</html>